<template>
  <div class="w-full mt-[30px]">
    <div class="text-[16px] text-[#333] font-bold mb-[25px] title">资产信息</div>
    <el-form ref="formRef" :model="form" :rules="rules" :inline="false" validateOnRuleChange>
      <el-form-item prop="userName">
        <div class="w-full">
          <div class="label">小程序原始ID<span class="pl-[5px] red">*</span></div>
          <div class="flex box">
            <el-input :disabled="props.isEdit" v-model="form.userName" maxlength="20" show-word-limit placeholder="请输入小程序原始ID" />
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="name">
        <div class="w-full">
          <div class="label">小程序名称<span class="pl-[5px] red">*</span></div>
          <div class="flex box">
            <el-input :disabled="props.isEdit" v-model="form.name" maxlength="50" show-word-limit placeholder="请输入小程序名称" />
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="path">
        <div class="w-full">
          <div class="label">小程序路径参数</div>
          <div class="flex box">
            <el-input :disabled="props.isEdit" v-model="form.path" maxlength="300" show-word-limit placeholder="请输入小程序路径参数" />
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="remarkMessage">
        <div class="w-full">
          <div class="label">备注<span class="pl-[5px] red">*</span></div>
          <div class="flex box">
            <el-input v-model="form.remarkMessage" maxlength="15" show-word-limit placeholder="请输入资产备注信息" />
          </div>
        </div>
      </el-form-item>

      <!-- <el-form-item prop="link">
        <div class="w-full">
          <div class="label">小程序链接<span class="pl-[5px] red">*</span></div>
          <div class="flex box">
            <div class="h-[34px] zw">
              <el-input v-model="form.link" type="hidden" placeholder="请输入链接" />
            </div>
            <div
              class="w-full flex justify-center items-center text-[#999] border-dashed border-[1px] rounded-[4px] cursor-pointer border-[#999] addbtn"
              v-if="!form.link"
              @click="showAddLink(true)"
            >
              添加链接
            </div>
            <div class="w-full flex items-center" v-else>
              <div class="bg-[#f1f1f1] w-full flex items-center rounded-[4px] py-[10px] px-[10px] content">
                <div class="w-[calc(100% - 30px)] contbox">
                  <div class="text-cut leading-[16px] mb-[5px] link">{{ form.linkTemp.startPage }}?{{ form.linkTemp.params }}</div>
                  <div class="text-[12px] leading-[18px] text-[#ccc] remark">备注：{{ form.linkTemp.remark }}</div>
                </div>
                <div class="shrink-0 text-[12px] ml-auto text-[#409EFF] cursor-pointer action" @click="showAddLink(true)">编辑</div>
              </div>
              <div class="shrink-0 ml-[10px] cursor-pointer icon" @click="delLink">
                <el-icon><Delete /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </el-form-item> -->
    </el-form>

    <AddTypeLink
      :visible="addDialogInfo.visible"
      :title="addDialogInfo.title"
      :info="form.linkTemp"
      @closeLinkBox="showAddLink(false)"
      @getData="getData"
    />
  </div>
</template>

<script setup lang="ts">
import { getAccountAdvertiserList } from '@/api/advertisement/account';
import { AaccountAdvertiserVO, AaccountAdvertiserQuery, MicroAppVO } from '@/api/advertisement/account/types';
import { useAppStore } from '@/store/modules/app';

import { listTagInfo, type TagInfoVO } from '@/api/com';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const appStore = useAppStore();
const emit = defineEmits(['getValue']);
const props = defineProps<{
  isEdit: boolean;
}>();
interface LinkType {
  startPage: string;
  params: string;
  remark: string;
}

type StepVO = {
  userName: string;
  name: string;
  path: string;
  remarkMessage: string;
  link: string;
  linkTemp: LinkType;
};

const addDialogInfo = ref({
  visible: false,
  title: '自动生成链接'
});

const formRef = ref();

const initForm: StepVO = {
  userName: null,
  name: null,
  path: null,
  remarkMessage: null,
  link: '',
  linkTemp: undefined
};
const data = reactive<PageData<StepVO, AaccountAdvertiserQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    accountId: appStore.accountId,
    advertiserName: ''
  },
  rules: {
    userName: [
      { required: true, message: '请输入小程序原始ID，获取方式：小程序后台>设置>基本设置>账号信息>原始ID，例如："gh_xxx"', trigger: 'blur' }
    ],
    name: [{ required: true, message: '请输入小程序名称，须与小程序实际名称保持一致', trigger: 'blur' }],
    link: [{ required: true, message: '请添加链接', trigger: 'blur' }],
    remarkMessage: [{ required: true, message: '请输入资产备注信息', trigger: 'blur' }]
  }
});

const { form, queryParams, rules } = toRefs(data);

/**
 * 控制是否显示添加链接弹窗
 */
const showAddLink = (val: boolean) => {
  addDialogInfo.value.visible = val;
};

const getData = (val) => {
  form.value.linkTemp = val;
  form.value.link = val.startPage + '?' + val.params;
};

const delLink = async () => {
  await proxy?.$modal.confirm('是否确认删除链接?');
  form.value.link = '';
  form.value.linkTemp = {
    startPage: '',
    params: '',
    remark: ''
  };
};

const reset = () => {
  formRef.value?.resetFields();
  form.value.linkTemp = {
    startPage: '',
    params: '',
    remark: ''
  };
};

const checkRes = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      emit('getValue', {
        userName: form.value.userName,
        name: form.value.name,
        remarkMessage: form.value.remarkMessage,
        path: form.value.path
      });
    }
  });
};

const updateForm2Value = (data: any) => {
  console.log('🚀 ~ updateForm2Value ~ value:', data);
  form.value.userName = data.userName;
  form.value.name = data.name;
  form.value.path = data.path;
  form.value.remarkMessage = data.remarkMessage;
  // form.value.appId = data.appId;
  // form.value.remark = data.remark;
};

defineExpose({ reset, checkRes, updateForm2Value });

onMounted(() => {});
</script>

<style lang="scss" scoped>
.itembox {
  background-color: #f1f1f1;
  border: 1px solid #f1f1f1;
  &.active {
    color: #409eff;
    background-color: #fff;
    border: 1px solid #409eff;
  }
}
.valuebox {
  justify-content: space-between !important;
  align-items: center;
  .arrow {
    transform-origin: center center;
    transition: all linear 0.1s;
    transform: rotate(0deg);
    &.active {
      transform: rotate(180deg);
    }
  }
}
.cate {
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08);
  .left,
  .right {
    .active {
      background-color: #ccc;
    }
  }
}
</style>
